<template>
	<view class="fenxiao_index" :data-theme="themeStyle">
		<block v-if="info.fenxiao_name">
			<!-- 头部 -->
			<view class="fenxiao_index_header ns-bg-color" :data-theme="themeStyle">
				<view class="member">
					<view class="member-pic"><image :src="info.headimg ? $util.img(info.headimg) : $util.getDefaultImage().default_headimg" @error="info.headimg = $util.getDefaultImage().default_headimg" mode="aspectFill"></image></view>
					<view class="member-info">
						<view class="" @click="toLevel()">
							<text>{{ info.fenxiao_name }}</text>
							<text class="level_name">{{ info.level_name }}</text>
						</view>
						<view class="recommend">推荐人：{{ info.parent_name ? info.parent_name : '无'}}</view>
					</view>
					<!-- <view class="member-tixian" @click="goTixian()">{{ fenxiaoWords.withdraw }}</view> -->
					<view @click="$util.redirectTo('/otherpages/fenxiao/promote_code/promote_code')" class="manu-list-box">
						<image class="code" :src="$util.img('upload/uniapp/fenxiao/index/code1.png')" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<!-- 提现 -->
			<view class="fenxiao_index_money ns-bg-color">
				<view @click="$util.redirectTo('/otherpages/fenxiao/bill/bill')" class="index-money-item">
					<view class="item_money">{{ info.total_commission }}</view>
					<view class="item_tit">累计佣金 (元)</view>
				</view>
				<view class="xian">
					
				</view>
				<view @click="$util.redirectTo('/otherpages/fenxiao/withdraw_list/withdraw_list')" class="index-money-item">
					<view class="item_money">{{ info.account_withdraw }}</view>
					<view class="item_tit">累计提现 (元)</view>
				</view>
				<view class="xian">
					
				</view>
				<view @click="$util.redirectTo('/otherpages/fenxiao/withdraw_list/withdraw_list')" class="index-money-item">
					<text class="item_money">{{ info.account_withdraw_apply }}</text>
					<text class="item_tit">{{fenxiaoWords.withdraw}}中（元）</text>
				</view>
			</view>
		    <!-- 佣金 -->
			<view class="fenxiao-index-allmoney">
				<view class="allmoney-top">
					<view class="allmoney-top-money">
						<view class="total_commission ns-text-color">{{ info.account }}</view>
						<view>可{{fenxiaoWords.withdraw}}（元）</view>
					</view>
					<text @click="$util.redirectTo('/otherpages/fenxiao/withdraw_apply/withdraw_apply')" class="allmoney-top-btn ns-bg-color">
						申请提现
					</text>
				</view>
				<view class="allmoney-xian">
					
				</view>
				<view class="allmoney-bottom">
					<view class="allmoney-today">
						<view class="today ns-text-color">{{ info.today_commission }}</view>
						<view>今日收入 (元)</view>
					</view>
					<view class="allmoney-all-wrap">
						<view class="allmoney-all ns-text-color">{{ info.today_order_money }}</view>
						<view>总销售额 (元)</view>
					</view>
				</view>
			</view>
			
			<view class="fenxiao-index-other">
				<view @click="$util.redirectTo('/otherpages/fenxiao/team/team')" class="all-money-item">
					<view class="img-wrap">
						<image :src="$util.img('upload/uniapp/fenxiao/index/team2.png')" mode="aspectFill"></image>
					</view>
					<view class="all-money-tit-wrap">
						<text class="all-money-tit">我的团队</text>
						<text class="all-money-num">{{ teamNum }}人</text>
					</view>
				</view>
				<view @click="$util.redirectTo('/otherpages/fenxiao/team/team')" class="all-money-item">
					<view class="img-wrap">
						<image :src="$util.img('upload/uniapp/fenxiao/index/member.png')" mode="aspectFill"></image>
					</view>
					<view class="all-money-tit-wrap">
						<text class="all-money-tit">推荐会员</text>
						<text class="all-money-num">{{ info.one_child_num }}人</text>	
					</view>
				</view>
			</view>
			
			<!-- 功能列表 -->
			<view class="fenxiao_manu_list">
				<view class="content_manu">
					<view class="manu-list">
						<view class="manu-list-box" @click="$util.redirectTo('/otherpages/fenxiao/withdraw_apply/withdraw_apply')">
							<image :src="$util.img('upload/uniapp/fenxiao/index/withdraw.png')" mode="aspectFill"></image>
							<text>{{fenxiaoWords.withdraw}}</text>
						</view>
					</view>
					<view class="manu-list">
						<view class="manu-list-box" @click="$util.redirectTo('/otherpages/fenxiao/withdraw_list/withdraw_list')">
							<image :src="$util.img('upload/uniapp/fenxiao/index/tixian.png')" mode="aspectFill"></image>
							<text>{{fenxiaoWords.withdraw}}明细</text>
						</view>
					</view>
					<view class="manu-list">
						<view class="manu-list-box" @click="$util.redirectTo('/otherpages/fenxiao/order/order')">
							<image :src="$util.img('upload/uniapp/fenxiao/index/order.png')" mode="aspectFill"></image>
							<text>{{fenxiaoWords.concept+'订单'}}</text>
						</view>
					</view>
					<view class="manu-list">
						<view  class="manu-list-box" @click="$util.redirectTo('/otherpages/fenxiao/team/team')">
							<image :src="$util.img('upload/uniapp/fenxiao/index/team.png')" mode="aspectFill"></image>
							<text>{{fenxiaoWords.my_team}}</text>
						</view>
					</view>
					<view class="manu-list">
						<view class="manu-list-box" @click="$util.redirectTo('/otherpages/fenxiao/promote_code/promote_code')">
							<image :src="$util.img('upload/uniapp/fenxiao/index/code.png')" mode="aspectFill"></image>
							<text>推广海报</text>
						</view>
					</view>
					<view class="manu-list">
						<view class="manu-list-box" @click="$util.redirectTo('/otherpages/diy/diy/diy',{name:'DIY_FENXIAO_MARKET'})">
							<image :src="$util.img('upload/uniapp/fenxiao/index/market.png')" mode="aspectFill"></image>
							<text>{{fenxiaoWords.concept+'市场'}}</text>
						</view>
					</view>
					<view class="manu-list">
						<view class="manu-list-box" @click="$util.redirectTo('/otherpages/fenxiao/follow/follow')">
							<image :src="$util.img('upload/uniapp/fenxiao/index/collection.png')" mode="aspectFill"></image>
							<text>{{fenxiaoWords.concept + '商品'}}</text>
						</view>
					</view>
					<view class="manu-list">
						<view  class="manu-list-box" @click="$util.redirectTo('/otherpages/fenxiao/bill/bill')">
							<image :src="$util.img('upload/uniapp/fenxiao/index/bill.png')" mode="aspectFill"></image>
							<text>账单</text>
						</view>
					</view>
				</view>
			</view>
		</block>
		<view class="ns-padding-bottom"><ns-copy-right></ns-copy-right></view>
		<view class="empty"  v-if="!info.fenxiao_name&&showEmpty">
			<image :src="$util.img('upload/uniapp/fenxiao/index/no-fenxiao.png')" mode="widthFix"></image>
			<text>您还不是{{fenxiaoWords.fenxiao_name}}，请先提交申请</text>
			<view  @click="$util.redirectTo('/otherpages/fenxiao/apply/apply')" class="ns-bg-color">立即加入</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
		
	</view>
</template>

<script>
import fenxiaoWords from 'common/js/fenxiao-words.js';
import globalConfig from '@/common/js/golbalConfig.js'
import nsCopyRight from '@/components/ns-copyright/ns-copyright.vue';
export default {
	data() {
		return {
			info: {
				fenxiao_name: '',
			},
			showEmpty:false,
			teamNum: 0
		};
	},
	components:{
		nsCopyRight
	},
	mixins: [fenxiaoWords,globalConfig],
	onShow() {
		// 刷新多语言
		this.$langConfig.refresh();

		uni.setNavigationBarTitle({
			title: this.fenxiaoWords.concept + '中心'
		});

		if (uni.getStorageSync('token')) {
			this.getFenxiaoDetail();
		} else {
			this.$util.redirectTo(
				'/pages/login/login/login',
				{
					back: '/otherpages/fenxiao/index/index'
				},
				'redirectTo'
			);
		}
	},
	methods: {
		// 获取分销商信息
		getFenxiaoDetail() {
			this.$api.sendRequest({
				url: '/fenxiao/api/fenxiao/detail',
				success: res => {
					if (res.data) {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						this.info = res.data;
						this.getTeamNum();
						this.showEmpty=true;
					} else {
						this.$util.redirectTo('/otherpages/fenxiao/apply/apply',{},'redirectTo');
					}
				},
				fail: res => {
					this.showEmpty=true;
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		//去提现
		goTixian() {
			this.$util.redirectTo('/otherpages/fenxiao/withdraw_apply/withdraw_apply');
		},
		toLevel() {
			this.$util.redirectTo('/otherpages/fenxiao/level/level');
		},
		getTeamNum(){
			this.$api.sendRequest({
				url: '/fenxiao/api/fenxiao/teamnum',
				success: res => {
					if (res.code >= 0) {
						this.teamNum = res.data;
					} 
				}
			});
		}
	},
	onBackPress(options) {
		if (options.from === 'navigateBack') {
			return false;
		}
		this.$util.redirectTo('/pages/member/index/index',{}, 'reLaunch')
		return true;
	}
};
</script>

<style lang="scss">

.fenxiao_index{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.fenxiao_index_header {
	width: 100%;
	position: relative;
	min-height: 200rpx;
	.member {
		width: 100%;
		height: 220rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 50rpx 40rpx 0;
		box-sizing: border-box;

		.member-pic {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border: 4rpx solid #ffffff;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.member-info {
			width: 500rpx;
			height: 120rpx;
			margin-left:32rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			view {
				color: #ffffff;
			}
			.level_name {
				display: inline-block;
				border: 2rpx solid #fff;
				color: #fff;
				height: 34rpx;
				font-size: $ns-font-size-x-sm;
				padding: 0 10rpx;
				margin-left: 16rpx;
				line-height: 38rpx;
				border-radius: 4rpx;
			}
			
			.recommend{
				font-size: $ns-font-size-base;
				margin-top:20rpx
			}
		}

		.member-tixian {
			width: 120rpx;
			height: 50rpx;
			border: 2rpx solid #ffffff;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: $ns-font-size-base;
			color: #ffffff;
		}
		.code{
			width: 50rpx;
			height: 50rpx;
			margin-right: $ns-margin;
		}
	}
}

.fenxiao_index_money{
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;

	
	.xian{
		height: 60rpx;
		border: 0.5px solid #E7E7E7;
	}
	
	.index-money-item{
		padding: 40rpx 0;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		
		.item_money{
			color: #fff;
			font-size: $ns-font-size-xxx-lg;
			line-height: 1;
		}
		.item_tit{
			padding-top: 10rpx;
			font-size: $ns-font-size-base;
			color: #fff;
		}
	}
}

.fenxiao-index-allmoney{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-top: 18rpx;
	width:94%;
	border-radius: 10rpx;
	background-color: #FFFFFF;
	
	.allmoney-top{
		padding: 40rpx 36rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.allmoney-top-money{
			.total_commission{
				line-height: 1;
				font-size: $ns-font-size-x-lg;
			}
		}
		.allmoney-top-btn{
			color: #FFFFFF;
			padding: 12rpx 17rpx;
			font-size: $ns-font-size-base;
			line-height: 1;
			border-radius: 24rpx;
		}
	}
	.allmoney-xian{
		width: 100%;
		border: 1rpx solid #F1F1F1;
	}
	.allmoney-bottom{
		
		display: flex;
		.allmoney-today{
			padding: 40rpx 36rpx;
			flex: 1;
			.today{
				line-height: 1;
				font-size: $ns-font-size-x-lg;
			}
		}
		.allmoney-all-wrap{
			padding: 40rpx 36rpx;
			flex: 1;
			.allmoney-all{
				line-height: 1;
				font-size: $ns-font-size-x-lg;
			}
		}
	}
}

.fenxiao-index-other{
	padding: 30rpx 0;
	display: flex;
	margin-top: 18rpx;
	width:94%;
	border-radius: 10rpx;
	background-color: #FFFFFF;
	.all-money-item{
		flex: 1;
		margin-left: 46rpx;
		display: flex;
		font-size: $ns-font-size-base;
		align-items: center;
		.img-wrap{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 70rpx;
			height: 70rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.all-money-tit-wrap{
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 90rpx;
			.all-money-tit{
				color: #000000;
				font-size: $ns-font-size-base;
				
			}
			.all-money-num{
				color: #838383;
				font-size: $ns-font-size-base;
				line-height: 1;
			}
		}
	}
}

// .fenxiao_index_allmoney{
// 	display: flex;
// 	flex-direction: column;
// 	width:100%;
// 	background-color: #FFFFFF;
// 	// position: absolute;
// 	// top: 410rpx;
	
// 	.title-wrap{
// 		display: flex;
// 		align-items: center;
// 		border-bottom: 1rpx solid #f7f7f7;
// 		padding: 20rpx 40rpx;
// 		.title-img{
// 			width: 30rpx;
// 			height: 30rpx;
// 			display: flex;
// 			justify-content: center;
// 			align-items: center;
// 			margin-right: 10rpx;
// 			image{
// 				width: 100%;
// 				height: 100%;
// 			}
// 		}
// 		.title{
// 			color: #333333;
// 			font-size: $ns-font-size-lg;
// 		}
// 	}
// 	.all_money_wrap{
// 		display: flex;
// 		justify-content: center;
// 		align-items: center;
// 					padding: 25rpx 15rpx;
// 		.all-money{
// 			flex: 4;
// 			font-size: $ns-font-size-xx-lg;
// 		}
// 		.all-money{
// 			font-weight: 600;
// 			padding-left: 56rpx;
// 		}
// 		.xian{
// 			height: 80rpx;
// 			border: 1rpx solid #f7f7f7;
// 		}
// 		.all-money-item{
// 			flex: 3;
// 			display: flex;
// 			flex-direction: column;
// 			justify-content: space-between;
// 			align-items: center;
			
// 			.all-money-tit{
// 				color: $ns-text-color-gray;
// 				font-size: $ns-font-size-base;
// 			}
// 			.all-money-num{
				
// 				color: #333333;
// 				font-size: $ns-font-size-xx-lg;
// 			}
// 		}
// 	}
// }
.fenxiao_manu_list{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 94%;
	margin-top: 18rpx;
	background-color: #FFFFFF;
	// position: absolute;
	// top: 675rpx;
	.title-wrap{
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #f7f7f7;
		padding: 20rpx 40rpx;
		.title-img{
			width: 30rpx;
			height: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 10rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.title{
			color: #333333;
			font-size: $ns-font-size-lg;
			padding-left: 10rpx;
			padding-left: 5rpx;
		}
	}
	.content_manu {
		width: 100%;
		background: #ffffff;
		border-radius: 15rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 10rpx;
		.manu-list {
			width: 24.5%;
			height: 150rpx;
			display: inline-block;
			padding: 0 $ns-padding;
			box-sizing: border-box;
			.manu-list-box {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 15rpx;
				}
				text {
					font-size: $ns-font-size-base;
				}
			}
		}
	}
}
.fenxiao_content {
	.content_manu {
		width: 100%;
		background: #ffffff;
		border-radius: 15rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		.manu-list {
			width: 24.5%;
			height: 150rpx;
			display: inline-block;
			box-sizing: border-box;
			.manu-list-box {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 15rpx;
				}
				text {
					font-size: $ns-font-size-base;
				}
			}
		}
	}
}
.empty {
	width: 100%;
	height: 400rpx;
	margin-top: 200rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	image {
		width: 300rpx;
		margin-bottom: 50rpx;
	}
	text {
		font-size: $ns-font-size-base;
		font-weight: 600;
	}
	view {
		width: 300rpx;
		height: 70rpx;
		border-radius: 70rpx;
		text-align: center;
		line-height: 70rpx;
		color: #ffffff;
		margin-top: 30rpx;
	}
}
.member-level {
	width: 100%;
	height: 66rpx;
	padding: 0 $ns-padding;
	box-sizing: border-box;
	margin-top: 12rpx;
	.member-level-box {
		width: 100%;
		height: 100%;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background: linear-gradient(to right, #1d1d1d, rgba(#1d1d1d, 0.4));
		padding: 0 $ns-padding;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #ffd700;
		.iconv {
			font-size: $ns-font-size-xx-lg;
		}
		text {
			line-height: 1;
			display: flex;
			align-items: center;
			text {
				display: inline-block;
			}
		}
	}
}
.ns-padding-bottom{
	margin-top: 20rpx;
	
}
</style>
<style scoped>
	>>> .ns-copyright-info{
		margin-bottom: 0;
	}
</style>
